<template>
  <div class="container">
    <myheader></myheader>
    <div class="content">
      <ul class="big">
        <li class="big">
          <div class="top">
            <div class="top-l">
              <div class="top-l-l">
                <img src="../../../public/img/t1.jpg" alt="" class="user">
              </div>
              <div class="top-l-r">
                <p>Lei-Lei</p>
                <p>2分钟前</p>
              </div>
            </div>
          </div>

          <h5>[最低配置]做一份喜欢的早餐迎接周末的到来你会发现生活是多么的美好，而你却如此暴躁，不如休息片刻，再与我共同启程</h5>
          <h4>[最低配置]做一份喜欢的早餐迎接周末的到来</h4>

          <div class="zan">
            <p>
              <i class="iconfont icon-yanjing"></i>
              <span>123</span>
            </p> 
            <p>
              <i class="iconfont icon-changyongicon-"></i>
              <span>123</span>
            </p>
            <p>
              <i class="iconfont icon-dianzan"></i>
              <span>123</span>
            </p>  
          </div>
        </li>

        <li class="big">
          <div class="top">
            <div class="top-l">
              <div class="top-l-l">
                <img src="../../../public/img/t1.jpg" alt="" class="user">
              </div>
              <div class="top-l-r">
                <p>Lei-Lei</p>
                <p>2分钟前</p>
              </div>
            </div>
          </div>

          <h5>[最低配置]做一份喜欢的早餐迎接周末的到来你会发现生活是多么的美好，而你却如此暴躁，不如休息片刻，再与我共同启程</h5>
          <h4>[最低配置]做一份喜欢的早餐迎接周末的到来</h4>

          <div class="zan">
            <p>
              <i class="iconfont icon-yanjing"></i>
              <span>123</span>
            </p> 
            <p>
              <i class="iconfont icon-changyongicon-"></i>
              <span>123</span>
            </p>
            <p>
              <i class="iconfont icon-dianzan"></i>
              <span>123</span>
            </p>  
          </div>
        </li>

        <li class="big">
          <div class="top">
            <div class="top-l">
              <div class="top-l-l">
                <img src="../../../public/img/t1.jpg" alt="" class="user">
              </div>
              <div class="top-l-r">
                <p>Lei-Lei</p>
                <p>2分钟前</p>
              </div>
            </div>
          </div>

          <h5>[最低配置]做一份喜欢的早餐迎接周末的到来你会发现生活是多么的美好，而你却如此暴躁，不如休息片刻，再与我共同启程</h5>
          <h4>[最低配置]做一份喜欢的早餐迎接周末的到来</h4>

          <div class="zan">
            <p>
              <i class="iconfont icon-yanjing"></i>
              <span>123</span>
            </p> 
            <p>
              <i class="iconfont icon-changyongicon-"></i>
              <span>123</span>
            </p>
            <p>
              <i class="iconfont icon-dianzan"></i>
              <span>123</span>
            </p>  
          </div>
        </li>

        <li class="big">
          <div class="top">
            <div class="top-l">
              <div class="top-l-l">
                <img src="../../../public/img/t1.jpg" alt="" class="user">
              </div>
              <div class="top-l-r">
                <p>Lei-Lei</p>
                <p>2分钟前</p>
              </div>
            </div>
          </div>

          <h5>[最低配置]做一份喜欢的早餐迎接周末的到来你会发现生活是多么的美好，而你却如此暴躁，不如休息片刻，再与我共同启程</h5>
          <h4>[最低配置]做一份喜欢的早餐迎接周末的到来</h4>

          <div class="zan">
            <p>
              <i class="iconfont icon-yanjing"></i>
              <span>123</span>
            </p> 
            <p>
              <i class="iconfont icon-changyongicon-"></i>
              <span>123</span>
            </p>
            <p>
              <i class="iconfont icon-dianzan"></i>
              <span>123</span>
            </p>  
          </div>
        </li>
      </ul> 
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
export default {
components: {
  myheader: Header
}
}
</script>

<style lang="scss"  scoped>
@import '@/lib/reset.scss';
.header {
		@include flexbox();
		@include justify-content();
    @include align-items();
}
.content{
  @include overflow(auto);
  ul.big {
    li.big {
      margin-bottom: .24rem;
      .top {
        margin-bottom: .05rem;  
        @include flexbox();
        .top-l {
          margin-left: .2rem;          
          width:80%;
          @include flexbox();
          img.user {
            width: .42rem;
            height: .42rem;
            border-radius: 50%;
            margin-right: .1rem;
          }
        }
      } 
      h5 {
        height:.5rem;
        font:.12rem/.28rem "";
        text-indent: .2rem;
      }
      h4 {
        margin-bottom: .1rem;  
        height:.28rem;
        font:.12rem/.28rem "";
        text-indent: .2rem;
      }
      .zan {
        @include flexbox();
        @include justify-content(space-around)
      }
    }
  }
}
</style>
